package com.example.chatty.screens.conversation

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ArrowBack
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.chatty.ui.components.TopBar
import com.example.chatty.ui.theme.chattyColors


@Preview
@Composable
fun ConversationTopBar(
    modifier: Modifier = Modifier,
    conversationName: String = "MyFriend",
    onNavIconPressed: () -> Unit = {}
) {

    TopBar(
        modifier = modifier,
        start = {
            Icon(
                Icons.Outlined.ArrowBack,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurface,
                modifier = Modifier
                    .clickable(onClick = onNavIconPressed)
                    .padding(horizontal = 12.dp, vertical = 16.dp)
                    .height(24.dp),
            )
        },
        center = {
            Text(
                text = conversationName,
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.chattyColors.textColor
            )

        }
    )
}